<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
  <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/highcharts.js}"></script>
  <script type="text/javascript" th:src="@{/js/exporting.js}"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>数据统计</li>
    <li>入库统计</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form action="/erp1/statis/rk/allrkstatis" method="post" id="rkstatisform">
    <input type="hidden" name="pageno" id="pageno" value=""/>
    <ul class="tools">
      <li> 所属区域：
        <select name="provinceId" onchange="getCity(this.value)">
          <option value="0">请选择省份</option>
          <option th:each="p : ${session.provinces}" th:value="${p.id}" th:text="${p.pName}"
                  th:selected="${p.id==rkStatis.provinceId}?true:false">
          </option>
        </select>
        <select name="cityId">
          <option name="0">请选择城市</option>
        </select>
      </li>
      <li> 仓库名称:
        <input type="text" name="cName" th:value="${rkStatis.cName}"/>
      </li>

      <li class="subBut" onclick="goPage(1)"><img th:src="@{/images/t06.png}" />查询</li>
    </ul>
    <table class="tablelist">
      <thead>
        <tr>
          <th>序号</th>
          <th>仓库名称</th>
          <th>负责人</th>
          <th>所属区域</th>
          <th>入库数量</th>
          <th>金额</th>
          <th>入库明细</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="r,var : ${rkstatisinfo.list}">
          <td th:text="${var.count+(rkstatisinfo.pageNum-1)*rkstatisinfo.pageSize}"></td>
          <td th:text="${r.cName}"></td>
          <td th:text="${r.users.uname}"></td>
          <td th:text="${r.province.pName+r.city.cName}"></td>
          <td th:text="${r.amount}"></td>
          <td th:text="${r.total}"></td>
          <td>
          	<a th:href="'/erp1/statis/rk/rkview?id='+${r.warehouseId}" class="tablelink">查看详情</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagin">
      <div class="message">共<i class="blue" th:text="${rkstatisinfo.total}"></i>条记录，当前显示第&nbsp;<i class="blue"
                                                                                                  th:text="${rkstatisinfo.pageNum+'&nbsp;'}">2</i>页
      </div>
      <ul class="paginList">
        <li class="paginItem">
          <a href="javascript:void(0);"
             th:onclick="goPage([[${rkstatisinfo.isFirstPage?1:rkstatisinfo.pageNum-1}]])">
            <span th:class="${rkstatisinfo.isFirstPage?'pagepre':'pagenxt roate'}"></span>
          </a>
        </li>
        <li th:class="${page==rkstatisinfo.pageNum?'paginItem current':'paginItem'}"
            th:each="page : ${rkstatisinfo.navigatepageNums}">
          <a href="javascript:;" th:text="${page}" th:onclick="goPage([[${page}]])">1</a>
        </li>
        <li class="paginItem">
          <a href="javascript:void(0);"
             th:onclick="goPage([[${rkstatisinfo.isLastPage?rkstatisinfo.pages:rkstatisinfo.pageNum+1}]])">
            <span th:class="${rkstatisinfo.isLastPage?'pagepre roate':'pagenxt'}"></span>
          </a>
        </li>
      </ul>
    </div>
  </form>
</div>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script th:inline="javascript">
	$('.tablelist tbody tr:odd').addClass('odd');

    $(function () {
      var num=$("select[name=provinceId]").val();
      getCity(num);
      tiaozhuang();
    });

    function getCity(num) {
      $.get("/erp1/ajaxCity", {"pid": num}, function (data) {
        $("select[name=cityId]").html("");
        var options = "<option value='0'>请选择城市</option>"
        var c=[[${rkStatis.cityId}]];
        $.each(data, function (i, e) {
          if(c==e.id){
            options += "<option value='" + e.id + "' selected='selected'>" + e.cname + "</option>";
          }else{
            options+="<option value='"+e.id+"'>"+e.cname+"</option>";
          }
        });
        $("select[name=cityId]").append(options);
      }, "json");
    };

    function goPage(num) {
      $("#pageno").val(num);
      $("#rkstatisform").submit();
    }

    /*
 Highcharts JS v7.2.1 (2019-10-31)

 (c) 2009-2019 Torstein Honsi

 License: www.highcharts.com/license
*/
    (function(a){"object"===typeof module&&module.exports?(a["default"]=a,module.exports=a):"function"===typeof define&&define.amd?define("highcharts/themes/sand-signika",["highcharts"],function(b){a(b);a.Highcharts=b;return a}):a("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(a){function b(a,b,c,d){a.hasOwnProperty(b)||(a[b]=d.apply(null,c))}a=a?a._modules:{};b(a,"themes/sand-signika.js",[a["parts/Globals.js"]],function(a){a.createElement("link",{href:"https://fonts.googleapis.com/css?family=Signika:400,700",
      rel:"stylesheet",type:"text/css"},null,document.getElementsByTagName("head")[0]);a.addEvent(a.Chart,"afterGetContainer",function(){this.container.style.background="url(https://www.highcharts.com/samples/graphics/sand.png)"});a.theme={colors:"#f45b5b #8085e9 #8d4654 #7798BF #aaeeee #ff0066 #eeaaee #55BF3B #DF5353 #7798BF #aaeeee".split(" "),chart:{backgroundColor:null,style:{fontFamily:"Signika, serif"}},title:{style:{color:"black",fontSize:"16px",fontWeight:"bold"}},subtitle:{style:{color:"black"}},
      tooltip:{borderWidth:0},labels:{style:{color:"#6e6e70"}},legend:{backgroundColor:"#E0E0E8",itemStyle:{fontWeight:"bold",fontSize:"13px"}},xAxis:{labels:{style:{color:"#6e6e70"}}},yAxis:{labels:{style:{color:"#6e6e70"}}},plotOptions:{series:{shadow:!0},candlestick:{lineColor:"#404048"},map:{shadow:!1}},navigator:{xAxis:{gridLineColor:"#D0D0D8"}},rangeSelector:{buttonTheme:{fill:"white",stroke:"#C0C0C8","stroke-width":1,states:{select:{fill:"#D0D0D8"}}}},scrollbar:{trackBorderColor:"#C0C0C8"}};a.setOptions(a.theme)});
      b(a,"masters/themes/sand-signika.src.js",[],function(){})});
    //# sourceMappingURL=sand-signika.js.map

    function tiaozhuang() {
      $.ajax({
        url:"/erp1/statis/rk/tiaozhuang",
        type:"get",
        contentType:"application/json;charset=UTF-8",
        dataType:"json",
        async:"false",
        success:function (data) {
          var arr = new Array();
          $.each(data, function (i, e) {
            arr[i] = new Array();
            for (var j = 0; j < 2; j++) {
              arr[i][0] = e.cname;
              arr[i][1] = e.total;
            }
          });
          var chart = {
            type: 'column'
          };
          var title = {
            text: '仓库入库金额统计'
          };
          var subtitle = {
            text: 'Source:第二小组'
          };
          var xAxis = {
            type: 'category',
            labels: {
              rotation: 0,
              style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
              }
            }
          };
          var yAxis ={
            min: 0,
            title: {
              text: '金额 (万元)'
            }
          };
          var tooltip = {
            pointFormat: '仓库入库: <b>{point.y:.1f} 万</b>'
          };
          var credits = {
            enabled: false
          };
          var series= [{
            name: '金额',
            data: arr,
            dataLabels: {
              enabled: true,
              rotation: -90,
              color: '#FFFFFF',
              align: 'right',
              format: '{point.y:.1f}', // one decimal
              y: 10, // 10 pixels down from the top
              style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
              }
            }
          }];

          var json = {};
          json.chart = chart;
          json.title = title;
          json.subtitle = subtitle;
          json.xAxis = xAxis;
          json.yAxis = yAxis;
          json.tooltip = tooltip;
          json.credits = credits;
          json.series = series;
          $('#container').highcharts(json);
        }
      });
    }
</script>
</body>
</html>
